import { ExtractPropTypes } from 'vue'
import { TuniaoSizes, TuniaoSize } from '../../types/tuniao-ui'
import { validatorColorValue, validatorSizeValue } from '../../utils'

/**
 * 加载动画有效值
 */
export const LoadingModes = ['circle', 'flower'] as const
export type LoadingMode = typeof LoadingModes[number]

/**
 * props参数
 */
export const loadingProps = {
  /** 显示加载状态 */
  show: {
    type: Boolean,
    default: false
  },
  /** 加载动画类型 circle 圆圈 flower 花朵 */
  mode: {
    type: String,
    default: 'circle',
    validator: (value: LoadingMode) => {
      return LoadingModes.includes(value)
    }
  },
  /** 显示加载动画 */
  animation: {
    type: Boolean,
    default: true
  },
  /** 颜色, 只支持十六进制、rgba()、rgb(), 在circle模式下有效 */
  color: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value, false)
    }
  },
  /** 加载动画大小, (内置sm、lg、xl)默认单位rpx */
  size: {
    type: [String, Number],
    default: 0,
    validator: (value: string | number) => {
      return validatorSizeValue(value) || TuniaoSizes.includes(value as TuniaoSize)
    }
  }
}
export type LoadingProps = ExtractPropTypes<typeof loadingProps>
